<template>
  <div class="app-table">
    <el-table
      ref="dataTable"
      v-loading="listLoading"
      :data="pageData.list"
      element-loading-text="拼命加载中"
      :header-cell-style="{ backgroundColor: '#409EFF', color: '#fff' }"
      :cell-class-name="set_cell_style"
      :row-class-name="tableRowClassName"
      @selection-change="handleSelectionChange"
      @row-click="handleRowClick"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column
        v-for="(item, index) in tableColumns"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :formatter="item.formatter"
        :filters="item.filters"
        :class-name="item.className"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        v-if="pageData.type === 0"
        label="操作"
        fixed="right"
        width="200"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status == 1 || scope.row.status == 2"
            size="mini"
            type="success"
            @click="changeForMal(scope.$index, pageData.list)"
          >
            转为入住
          </el-button>
          <el-button
            v-if="scope.row.status == 1 || scope.row.status == 2"
            size="mini"
            type="success"
            @click="cancelOrder(scope.$index, pageData.list)"
          >
            取消预约
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        v-if="pageData.type === 1"
        label="操作"
        fixed="right"
        width="100"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status == 1"
            size="mini"
            type="success"
            @click="changeForMal(scope.$index, pageData.list)"
          >
            转为入住
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        v-if="pageData.type === 2"
        label="操作"
        fixed="right"
        width="460"
      >
        <template slot-scope="scope">
          <!-- <el-button
            v-if="scope.row.floor_str"
            size="mini"
            type="primary"
            @click="leavedetail(scope.$index, pageData.list)"
          >
            查看明细
          </el-button> -->
          <el-button
            size="mini"
            type="success"
            @click="accountTk(scope.$index, pageData.list)"
          >
            账单明细
          </el-button>
          <el-button
            size="mini"
            type="primary"
            @click="consumption(scope.$index, pageData.list)"
          >
            账单汇总
          </el-button>
          <el-button
            v-if="scope.row.status != -1 && scope.row.floor_str"
            size="mini"
            type="danger"
            @click="leave(scope.$index, pageData.list)"
          >
            办理离院
          </el-button>
          <!-- <el-button
            v-if="scope.row.is_test"
            size="mini"
            type="success"
            @click="handleGetQuestions(scope.row)"
          >
            测评记录
          </el-button> -->
          <el-button
            size="mini"
            type="success"
            @click="handleGetQuestions(scope.row)"
          >
            健康测评
          </el-button>
          <el-button
            v-if="scope.row.status == -1 && scope.row.status != -3"
            size="mini"
            type="danger"
            @click="elderback(scope.$index, pageData.list)"
          >
            重新入住
          </el-button>
          <!-- <el-button
            v-if="scope.row.status == -1"
            size="mini"
            type="danger"
            @click="blllDetail(scope.$index, pageData.list)"
          >
            账单
          </el-button> -->

        </template>
      </el-table-column>
      <el-table-column
        v-if="pageData.type === 4"
        label="操作"
        fixed="right"
        width="200"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click="changeForMal(scope.$index, pageData.list)"
          >
            编辑/查看
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="cancelOrder(scope.$index, pageData.list)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        v-if="pageData.type === 5"
        label="操作"
        fixed="right"
        width="280"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="assignlistOrder(scope.$index, pageData.list)"
          >
            护工
          </el-button>
          <el-button
            size="mini"
            type="success"
            @click="giveGift(scope.$index, pageData.list)"
          >
            分配
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="cancelOrder(scope.$index, pageData.list)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        v-if="pageData.type === 6"
        label="操作"
        fixed="right"
        width="200"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click="changeForMal(scope.$index, pageData.list)"
          >
            病历
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="cancelOrder(scope.$index, pageData.list)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        v-if="pageData.type === 7"
        label="操作"
        fixed="right"
        width="200"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click="changeForMal(scope.$index, pageData.list)"
          >
            服务
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="cancelOrder(scope.$index, pageData.list)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        v-if="pageData.type === 8"
        label="操作"
        fixed="right"
        width="280"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="assignlistOrder(scope.$index, pageData.list)"
          >
            负责老人
          </el-button>
          <el-button
            size="mini"
            type="success"
            @click="changeForMal(scope.$index, pageData.list)"
          >
            编辑/查看
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="cancelOrder(scope.$index, pageData.list)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        v-if="pageData.type === 9"
        label="操作"
        fixed="right"
        width="200"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click="giveGift(scope.$index, pageData.list)"
          >
            分配
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="cancelOrder(scope.$index, pageData.list)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        v-if="pageData.type === 10"
        label="操作"
        fixed="right"
        width="280"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            v-if="!pageData.face"
            @click="assignlistOrder(scope.$index, pageData.list)"
          >
            分配
          </el-button>
          <el-button
            size="mini"
            type="primary"
            v-if="pageData.face"
            @click="addFacelistOrder(scope.$index, pageData.list)"
          >
            人脸设备
          </el-button>
          <el-button
            size="mini"
            type="success"
            @click="changeForMal(scope.$index, pageData.list)"
          >
            编辑/查看
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="cancelOrder(scope.$index, pageData.list)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        v-if="pageData.type === -1"
        label="操作"
        fixed="right"
        :width="width"
      >
        <template slot-scope="scope">
          <slot :row="scope.row"></slot>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="!pageData.isPage"
      background
      :current-page="pageData.page"
      layout="total, prev, pager, next, jumper"
      :total="pageData.total"
      :page-size="pageData.page_size"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>
  </div>
</template>

<script>
  export default {
    name: "AppTable",
    props: {
      tableColumns: {
        type: Array,
        default() {
          return [];
        },
      },
      pageData: {
        type: Object,
        default() {
          return {
            isPage: true,
            type: undefined,
            page: 1,
            total: 0,
            page_size: 5,
            list: [],
          };
        },
      },
      tableRowClassName: {
        type: Function,
        default() {
          return () => {

          }
        }
      },
      width: {
        type: Number,
        default() {
          return 200
        }
      },
    },
    data() {
      return {
        listLoading: true,
      };
    },
    watch: {
      pageData: {
        handler: function (newValue, oldValue) {
          // console.log("改变");
          this.listLoading = false;
        },
        deep: true,
      },
    },
    mounted() {},
    methods: {
      // tableRowClassName({ row }) {
      //   console.log(column)
      //   this.$emit("table_row_class_name", row)
      // },
      set_cell_style({ row, column, rowIndex, columnIndex }) {
        if (column.label === "入住状态") {
          if (row.status == 0 && columnIndex == 8) {
            return "red-cell";
          } else if (row.status == 3 && columnIndex == 8) {
            return "green-cell";
          } else if ((row.status == 2 || row.status == 1) && columnIndex == 8) {
            return "blue-cell";
          } else if (row.status == 1 && columnIndex == 9) {
            return "yellow-cell";
          } else if (row.status == 2 && columnIndex == 9) {
            return "green-cell";
          } else if (row.status == -1 && columnIndex == 7) {
            return "red-cell";
          } else if (row.status == 1 && columnIndex == 7) {
            return "blue-cell";
          }
        } else if (column.label === "剩余天数") {
          return "red-cell-font";
        } else if (column.label === "分配状态") {
          if (row.assign_status == 1) {
            return "green-cell";
          } else {
            return "yellow-cell";
          }
        } else if (column.label === "角色状态") {
          if (row.is_freeze == 1) {
            return "red-cell";
          } else {
            return "blue-cell";
          }
        } else if(column.label === '评估结果'){
           if (row.test_level == 1 ) {
             return "green-cell";
           } else if (row.test_level == 2 || row.test_level == 3) {
             return "yellow-cell";
           } else if (row.test_level == 4 || row.test_level == 5) {
             return "red-cell";
           } else {
             return "blue-cell";
           }
        }

      },
      handleSelectionChange(rows) {
        this.$emit("handleCheckedRows", rows);
      },
      handleRowClick(rows) {
        this.$emit("handleRowClick", rows);
      },
      handleCurrentChange(val) {
        this.$emit("current-change", val);
      },
      handleSizeChange(index, data) {},
      giveGift(index, data) {
        let checkData = {};
        let arrData = [data[index]];
        checkData.btnType = "get";
        checkData.dialogTitle = "转入" + this.name;
        checkData.rows = arrData;
        checkData.url = "/modules";
        checkData.sohwOnly = true;
        this.$emit("giveGift", checkData);
      },
      changeForMal(index, data) {
        // console.log(index, data);
        let checkData = {};
        let arrData = [data[index]];
        checkData.btnType = "get";
        checkData.dialogTitle = "转入" + this.name;
        checkData.rows = arrData;
        checkData.url = "/modules";
        checkData.sohwOnly = true;
        this.$emit("changeForMal", checkData);
      },
      cancelOrder(index, data) {
        // 取消预约
        let checkData = {};
        let arrData = [data[index]];
        checkData.btnType = "put";
        checkData.dialogTitle = "取消" + this.name;
        checkData.rows = arrData;
        checkData.url = "/modules";
        checkData.showOnly = false;
        checkData.showPart = true;
        this.$emit("cancelOrder", checkData);
      },
      leave(index, data) {
        // 离院
        let checkData = {};
        let arrData = [data[index]];
        checkData.btnType = "delete";
        checkData.dialogTitle = "离院" + this.name;
        checkData.rows = arrData;
        checkData.url = "/modules";
        checkData.showOnly = false;
        this.$emit("leave", checkData);
      },
      //重新入住
      elderback(index, data) {
        // 离院
        let checkData = {};
        let arrData = [data[index]];
        checkData.btnType = "delete";
        checkData.dialogTitle = "重新入住";
        checkData.rows = arrData;
        checkData.url = "/modules";
        checkData.showOnly = false;
        this.$emit("elderback", checkData);
      },
      leavedetail(index, data) {
        // 离院
        let checkData = {};
        let arrData = [data[index]];
        checkData.btnType = "delete";
        checkData.dialogTitle = "消费明细" + this.name;
        checkData.rows = arrData;
        checkData.url = "/modules";
        checkData.showOnly = false;
        this.$emit("leavedetail", checkData);
      },
      consumption(index, data) {
        // 账单汇总
        let checkData = {};
        let arrData = [data[index]];
        checkData.btnType = "delete";
        checkData.dialogTitle = "账单汇总" + this.name;
        checkData.rows = arrData;
        checkData.url = "/modules";
        checkData.showOnly = false;
        this.$emit("consumption", checkData);
      },
      accountTk(index, data) {
        // 账单明细
        let checkData = {};
        let arrData = [data[index]];
        checkData.btnType = "delete";
        checkData.dialogTitle = "账单明细" + this.name;
        checkData.rows = arrData;
        checkData.url = "/modules";
        checkData.showOnly = false;
        this.$emit("accountTk", checkData);
      },
      handleGetQuestions(rows) {
        //查看记录
        this.$emit("handleGetQuestions", rows);
      },
      blllDetail(index, data) {
        // 记账明细
        let checkData = {};
        let arrData = [data[index]];
        checkData.btnType = "delete";
        checkData.dialogTitle = "账单" + this.name;
        checkData.rows = arrData;
        checkData.url = "/modules";
        checkData.showOnly = false;
        this.$emit("blllDetail", checkData);
      },
      assignlistOrder(index, data) {
        // 记账明细
        let checkData = {};
        let arrData = [data[index]];
        checkData.btnType = "delete";
        checkData.dialogTitle = "负责老人" + this.name;
        checkData.rows = arrData;
        checkData.url = "/modules";
        checkData.showOnly = false;
        this.$emit("assignlistOrder", checkData);
      },
      addFacelistOrder(index, data) {
        // 记账明细
        let checkData = {};
        let arrData = [data[index]];
        checkData.btnType = "delete";
        checkData.dialogTitle = "负责老人" + this.name;
        checkData.rows = arrData;
        checkData.url = "/modules";
        checkData.showOnly = false;
        this.$emit("addFacelistOrder", checkData);
      },
    },
  };
</script>
<style scoped lang="scss">
  .el-table {
    ::v-deep {
      .hover-row{
        td{
          background-color: #4f699d !important;
        }
      }
      td {
        padding: 10px 0 !important;
        font-size: 16px !important;
        background: #11203f;
        .cell {
          font-size: 18px !important;
          color: #fff !important;
        }
      }

      th {
        padding: 12px 0 !important;

        .cell {
          font-size: 16px !important;
          color: #fff !important;
        }
      }

      .red-cell div {
        color: #fff;
        background: #f00;
      }

      .green-cell div {
        color: #fff;
        background: green;
      }

      .blue-cell div {
        color: #fff;
        background: rgb(64, 158, 255);
      }

      .yellow-cell div {
        color: #fff;
        background: #ff8000;
      }

      .red-cell-font div {
        color: red;
      }
      .warning-row {
        background: #efd1b3;
      }
    }
  }

</style>
